<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .A {
            width: 200px;
            height: 200px;
            background-color: rgba(1, 1, 0, 0.5);
            float: left;
            text-align: center;
        }

        .B {
            text-align: center;
            width: 250px;
            height: 200px;
            background-color: #c5ff48;
        }

        .C {
            text-align: center;
            float: left;
            width: 800px;
            height: 200px;
            background-color: #5852ff;
        }

        /*伪元素清除浮动*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* IE6、7 专有 */
        .clearfix {
            *zoom: 1;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table; /* 这句话可以出发BFC BFC可以清除浮动 */
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }


        .f1 {
            border: 1px solid red;
            /*overflow: hidden;*/
        }

        /*清除浮动*/
        .f1-d1 {
            width: 80px;
            height: 80px;
            background-color: #ea29ff;
            float: left;
        }

        .f1-d2 {
            width: 50px;
            height: 50px;
            background-color: #fffc40;
            float: left;
        }

        .f2 {
            width: 100px;
            height: 100px;
            background-color: #7838ff;
        }

    </style>
</head>
<body>
<p>A浮动不是标准流不占位置，其他元素位置上移，B不浮动所以会占用A原来位置，此时设置C浮动，C会浮在B下面，因为B不浮动是标准流占位置</p>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div style="clear: both"></div>
<p>为了让块元素在一行显示，所以我们需要使用浮动，但是浮动的盒子会影响其他元素布局，我们就需要解决</p>
<ul>
    <li>解决办法1：将浮动的元素用不浮动的大div包起来，前提是父div必须设置高度</li>
    <li>解决办法2：有些时候大div并知道子元素高度无法定高，而是想让子元素内容撑起父元素高度就需要使用清除浮动</li>
</ul>
<p>清除浮动就是为了解决子元素浮动，父元素高度为0的问题</p>
<p>清除浮动方法1：添加额外元素法 在最后一个浮动标签后新加一个div并添加clear属性，缺点是添加无意义额外标签，文档结构不清晰</p>
<p>清除浮动方法2：使用overflow属性清除浮动:hidden、auto、scroll 给父元素添加,没有额外无用标签而且可以撑开父元素高度</p>
<p>清除浮动方法3：使用after伪元素清除浮动，不需要再添加额外标签</p>
<p>清除浮动方法4：使用before和after双伪元素清除浮动</p>
<div class="f1 clearfix">
    <div class="f1-d1">f1-d1</div>
    <div class="f1-d2">f1-d2</div>
</div>
<div class="f2">f2</div>
</body>
</html>